<template>
  <div class="map-container">
    <div class="mapTop">
      地址：
      <div style="display: inline-block;">
        <el-input
          v-model="formData.address"
          size="medium"
          :disabled="true"
          placeholder="地址"
        ></el-input>
      </div>
      经度：
      <div style="display: inline-block;">
        <el-input
          v-model="formData.lng"
          size="medium"
          :disabled="true"
          placeholder="经度"
        ></el-input>
      </div>
      纬度：
      <div style="display: inline-block;">
        <el-input
          v-model="formData.lat"
          size="medium"
          :disabled="true"
          placeholder="纬度"
        ></el-input>
      </div>
      <div style="display: inline-block;">
        <el-button
          size="medium"
          type="primary"
          class="fr"
          @click="handleResult"
        >
          确定
        </el-button>
      </div>
    </div>
    <div id="mapStyle" class="container"></div>
  </div>
</template>

<script>
  // import mapData from "@/utils/data";
  // import Bus from "@/utils/bus";
  window._AMapSecurityConfig = {
  	securityJsCode: '27b9efeae60eced2755c4aa2bb057dc2'
  }
  import AMapLoader from '@amap/amap-jsapi-loader'
  export default {
    name: "Map",
    components: {},
    props: {
      keyword: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        imgThumb: require("@/assets/images/img.jpg"),
        formData: {},
        location: {
          lng: "",
          lat: "",
        },
        marker: null,
        AMap: null,
        map: null,
        localSearch: null,
      };
    },
    created() {},
    mounted() {
      this.init();
    },
    methods: {
      init() {
        this.$nextTick(() => {
           const _this = this
           AMapLoader.load({
             key: 'fbc77119432d0a84b0f595d83ffe456f',
             version: '1.4.15',
             plugins: ['AMap.Geocoder']
           }).then(AMap => {
             _this.AMap = AMap
             _this.$nextTick(() => _this.initMap(AMap))
           }).catch(e => {
             console.error(e)
           })
        });
      },
      // 加载地图
      initMap (AMap) {
        // console.log(this.keyword)
        const _this = this;
        if (this.keyword != "undefined")
          this.$set(this.formData, "address", this.keyword);
        else this.$set(this.formData, "address", "");
        
        AMap.plugin('AMap.Geocoder', function () {
          const geocoder = new AMap.Geocoder()
          _this.geocoder = geocoder
          // _this.admin_lnglat.lat = 35.47
          // _this.admin_lnglat.lng = 113.80
          const admin_address = _this.keyword;
          geocoder.getLocation(admin_address, function (status, result) {
            if (status === 'complete' && result.geocodes.length) {
              const lnglat = result.geocodes[0].location;
              // _this.admin_lnglat.lat = lnglat.lat
              // _this.admin_lnglat.lng = lnglat.lng
              _this.$set(_this.formData, "lng", lnglat.lng);
              _this.$set(_this.formData, "lat", lnglat.lat);
                _this.setMarks(lnglat.lng,lnglat.lat)
            } else {
              console.log('根据地址查询位置失败')
            }
          })
        })
      },
      setMarks(lng,lat){
        const _this = this;
        _this.map = new AMap.Map('mapStyle', {
          resizeEnable: true,
          mapStyle: 'amap://styles/dark',
          center: [lng, lat],
          zoom: 10
        })
         let mList = []
         const markers = [{
           lng:lng,
           lat: lat
         }]
         markers.map((it,i)=>{
             // let title = it.title
             let marker = new AMap.Marker({
                 position: new AMap.LngLat(it.lng,it.lat),
                 offset: new AMap.Pixel(0,0),
             });
             marker.setLabel({
                 direction:'right',
                 offset: new AMap.Pixel(5, -20),
                 content: "<div class='mark-label'>"+this.keyword+"</div>",
             });
             mList.push(marker)
         })
         _this.map && _this.map.setFitView()
         _this.map.add(mList)
      },
      handleResult() {
        this.$emit("result", this.formData);
      },
    },
  };
</script>
<style>
  .map-container .BMapGLLabel a {
    color: #333;
  }

  .map-container .BMapGL_bubble_content {
    padding-top: 20px;
  }

  .map-container .mapThumb {
    width: 100%;
    height: 220px;
    margin-bottom: 10px;
    overflow: hidden;
  }

  .map-container .mapThumb img {
    width: 100%;
  }

  .mapText {
    display: grid;
    grid-template-columns: 50% 50%;
    line-height: 200%;
  }

  .mapText .address {
    grid-column-start: 1;
    grid-column-end: 3;
  }
</style>
<style lang="scss" scoped>
  .map-container {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;

    .container {
      width: 100%;
      height: calc(100vh - 65px);
    }

    .mapTop {
      margin-bottom: 20px;
    }

    .mapTop > div {
      display: inline-block;
      width: 20%;
      margin-right: 10px;
      vertical-align: middle;

      &:first-child {
        width: 35%;
      }

      &:last-child {
        width: 70px;
      }
    }

    .map-menu {
      position: absolute;
      top: calc((100vh - 480px) / 2);
      right: 0;
      background: rgba($color: #2cc1bb, $alpha: 0.5);
      border-radius: 2px;

      .item {
        width: 80px;
        height: 80px;
        font-size: 12px;
        line-height: 80px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        border-bottom: 1px solid #fff;

        &:last-child {
          border: none;
        }

        &.active {
          background: rgba($color: #2cc1bb, $alpha: 0.5);
        }
      }
    }
  }
</style>
